<template>
  <div>
    <div class="main">
      <div class="type">
        <div class="title">
          - 今晚加班吗？
        </div>
        <vue-typed-js :strings="['- 不加','- 加！！！']" :backSpeed="20" >
          <h1 class="typing"></h1>
        </vue-typed-js>
      </div>

      <div class="buttons">
        <img src="@/assets/fish.gif" alt="" @click="$router.push('/setting')">
        <div class="button-list">
          <div class="button" @click="$router.push('/edit')">编辑数据</div>
          <div class="button" @click="$router.push('/analysis')">查看统计</div>
        </div>
      </div>
      
      <div class="bars">
        <bars
            :data="dataList"
            :gradient="['#e8d9cb', '#f51f3b']">
        </bars>
      </div>


    </div>
  </div>
</template>

<script>

import dayjs from "dayjs";

export default {
  components:{},
  data(){
    return{
      dataList:  []
    }
  },
  created() {
    this.generateData()
  },
  methods:{
    generateData(){
      let list = localStorage.getItem("record")
      if(list){
        list = JSON.parse(list)
        let now = new Date()
        let dayAmount = dayjs(now).daysInMonth()
        for(let i = 0 ; i < dayAmount; i ++){
          let date = new Date(now.getFullYear(), now.getMonth(), now.getDate() - (dayAmount - 1 - i))
          let dateStr = dayjs(date).format("YYYY-MM-DD")
          let date1 = list.find(i => i.date === dateStr)
          if(date1){
            this.dataList.push(this.getWorkTime(date1.time))
          }
          else{
            this.dataList.push(0)
          }
        }


      }
    }
  }
}

</script>

<style lang="scss" scoped>
.main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  box-sizing: border-box;
}
.bars{
  padding: 10px 20px;
}
.type{
  padding: 50px 30px;
  .title{
    margin-bottom: 10px;
  }
}
.buttons{
  display: flex;
  align-items: stretch;
  justify-content: space-around;
}
.buttons{
  .button-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .button{
      background: linear-gradient(70deg, #005d98, #227ba2);
      padding: 12px 20px;
      color: white;
      border-radius: 10px;
      &:nth-child(2){
        background: linear-gradient(70deg, #e25b45, #ff8357);
      }
    }

  }
}
</style>
